參考資料：
Alex老師教學
PJCHENder筆記

捲動出現圖片。

題目預設的過濾效果，避免多次觸發使效能下降

function debounce(func, wait = 20, immediate = true) {
    var timeout;
    return function () {
        var context = this,
            args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
}

寫出監聽

// 控制卷軸
let scrollHandler = () => {
    console.log('scroll', new Date().getTime()); //可看出滑動時的時間差距很小

};
// 卷軸在瀏覽器上，使用window
window.addEventListener('scroll', scrollHandler);

先寫出上下高度，開始寫圖片進入畫面

// 控制卷軸
let scrollHandler = () => {
    let windowTop = window.scrollY; //相對於最上方的網頁座標，單位px
    let windowBottom = windowTop + window.innerHeight; //網頁最底部高度 = 上方高度 + 頁面高度
    
};

圖片中段進入頁面時滑入

let images = document.querySelectorAll('img'); //所有圖片

// 控制卷軸
let scrollHandler = () => {
    let windowTop = window.scrollY; //相對於最上方的網頁座標，單位px
    let windowBottom = windowTop + window.innerHeight; //網頁最底部高度 = 上方高度 + 頁面高度
    iimages.forEach(img => {
        //圖片一半進入畫面才出現
        if (img.offsetTop + img.height / 2 < windowBottom) {
            img.classList.add('active');
        }
    });
};

優化並加入移除功能，效果就會是圖片依照畫面捲動進入和消失

	images.forEach(img => {
        let imgMiddle = img.offsetTop + img.height / 2; //圖片與上方距離+圖片高度/2
        //圖片進入畫面最下方和最上方之間時加入active使之出現，反之移除使圖片消失
        if (imgMiddle < windowBottom && imgMiddle > windowTop) {
            img.classList.add('active');
        } else {
            img.classList.remove('active');
        }
    });

在監聽加入預設的方訊就完成了

window.addEventListener('scroll', debounce(scrollHandler));

連結